import React from 'react';
// import ReactDOM from 'react-dom';
import echarts from 'echarts';
import { Message } from 'antd';

export default React.createClass({

    getInitialState() {
        return {
            beforeTenement: '',
            decorate: '',
            rentContract:'',
            total:''
        }
    },
    componentDidMount() {
        // this.drawColumn();
        this.fetchData();
    },
    drawColumn(params) {
        var myCharts = echarts.init(document.getElementById('funderTypeCharts'));
        let _me = this;
        let dataList = [
                            {value:params.beforeTenement, name: '收房贷'},
                            {value:params.decorate, name:'装修贷'},
                            {value:params.rentContract, name: '租约贷'},
                        ]
        option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
               
                series: [
                    {
                        name:'统计',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle:{
                            normal:{
                                color:function(params){
                                    var colorList=['#ffab81','#ade893','#74c4fe','#bf85d1'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '16',
                                    fontWeight: ''
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:dataList
                    }
                ]
            };

        myCharts.setOption(option);
    },

    

    fetchData() {
        let _me =this;
        Utils.sendAjax({
            url: '/funder/finance/all',
            callback: function (result) {
                console.log(result)
                if (result.code == '200') {
                    let data = result.data;
                    _me.setState({
                        total:data.total,
                    });
                    let params = {
                        beforeTenement: data.beforeTenement,
                        decorate: data.decorate,
                        rentContract: data.rentContract,

                    }
                    _me.drawColumn(params);
                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },

    render () {
        return (
            <div>
                <div id="funderTypeCharts" className="highChats fl"  style={{height:'250px',width:'250px',marginTop:'-50px',marginLeft:'220px'}}></div>
                <p className="accountMoney" style={{left:'283px'}}><span className="ti">总计</span><span className="num">{this.state.total}</span></p>
            </div>
        );
    }
});
